<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="components-demo">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
    </div>
</body>

<script type="text/javascript">
    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
        el: '#components-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue', content: 'content-1' },
                { id: 2, title: 'Blogging with Vue', content: 'content-2' },
                { id: 3, title: 'Why Vue is so fun', content: 'content-3' }
            ]
        }
    });
</script>

</html>